<template>
  <div>
    <el-container>
      <el-header>
        <Header @getArticles="getArticles" />
      </el-header>
      <el-main>
        <div class="wrapper">
          <Main ref="main" class="left" />
          <Random />
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
import Header from '@/components/header.vue'
import Main from '@/components/main.vue'
import Random from '@/components/random.vue'
export default defineComponent({
  name: 'Home',
  components: {
    Header,
    Main,
    Random,
  },
  setup() {
    const main = ref()
    const getArticles = function (e: number) {
      main.value.get_Articles(e)
    }

    return {
      getArticles,
      main,
    }
  },
})
</script>

<style lang="scss" scoped>
* {
  padding: 0;
  margin: 0;
}
.el-container {
  width: 100vw;
  height: 100vh;
}
.el-main {
  background: #222325;
  color: var(--el-text-color-primary);
  height: 100vh;
  width: 100%;
  display: flex;
  justify-content: center;
  .wrapper {
    width: 60rem;
    display: flex;
    .left {
      display: flex;
      display: block;
      width: 100%;
      flex: 2;
    }
  }
}
</style>